<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :modal="model"
    top="5vh"
    :title="state.dialogTitle"
    :width="width"
  >
    <el-form
      ref="formRef"
      label-width="90px"
      :model="state.formData"
      :rules="state.formRules"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="区域编码:" prop="id">
            <el-input
              v-model="state.formData.id"
              :maxlength="32"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="区域名称:" prop="areaName">
            <el-input
              v-model="state.formData.areaName"
              :maxlength="32"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="区域简称:" prop="shortName">
            <el-input
              v-model="state.formData.shortName"
              :maxlength="32"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态:" prop="status">
            <easy-dict-select
              v-model:default-value="state.formData.status"
              dict-code="1002"
              show-all="N"
              expanding
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经度:" prop="lng">
            <el-input-number v-model="state.formData.lng" :precision="4" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纬度:" prop="lng">
            <el-input-number v-model="state.formData.lat" :precision="4" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="排序号:" prop="sort">
            <el-input-number v-model="state.formData.sort" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="级别:" prop="level">
            <el-input-number v-model="state.formData.level" :min="0" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上级区域" style="display: flex">
            <AreaPicker
              ref="areaPickerRef"
              :placeholder="state.formData.pname"
              @change="handleAreaChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="warning" icon="circle-close" @click="close">
        取消
      </el-button>
      <el-button
        :disabled="state.readonly"
        type="primary"
        icon="circle-check"
        @click="save"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup anme="AreaEdit">
import { useMessage } from "@/hooks/message";
import { addObj, updateObj } from "@/api/admin/system/area/";
import EasyDictSelect from "@/components/dictSelect.vue";
import AreaPicker from "@/components/areaPicker.vue";

const props = defineProps({
  title: {
    type: String,
    default: "区域"
  },
  width: {
    type: String,
    default: "40%"
  },
  model: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(["confirm"]);

const formRef = ref(null);
const areaPickerRef = ref(null);

const state = reactive({
  readonly: false,
  operationAdd: false,
  param_val: "",
  param_vals: [],
  formData: {
    id: "",
    pid: "0",
    pname: "无",
    areaName: "",
    shortName: "",
    areaCode: "",
    status: "0",
    level: 1,
    lng: 0.0,
    lat: 0.0,
    sort: 1
  },
  dialogTitle: props.title,
  formRules: {
    areaName: [
      { required: true, message: "分类名称不能为空", trigger: "blur" }
    ],
    pid: [{ required: true, message: "请选择上级区域", trigger: "blur" }],
    status: [{ required: true, message: "状态不能为空", trigger: "blur" }]
  },
  dialogVisible: false
});

const show = (row, readonly) => {
  if (readonly) {
    state.dialogTitle = `${props.title}详情`;
    state.readonly = readonly;
  } else {
    state.readonly = false;
  }
  if (row && row.id) {
    state.dialogTitle = `修改${props.title}`;
    Object.assign(state.formData, row);
  } else {
    state.operationAdd = true;
    state.dialogTitle = `新增${props.title}`;
  }
  console.log("show", state.formData);
  state.dialogVisible = true;
};

const close = () => {
  formRef.value.resetFields();
  state.readonly = false;
  state.operationAdd = false;
  state.formData = {
    id: "",
    pid: "0",
    pname: "无",
    areaName: "",
    shortName: "",
    areaCode: "",
    status: "0",
    level: 1,
    lng: 0.0,
    lat: 0.0,
    sort: 1
  };
  state.dialogVisible = false;
};

const save = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      const params = {
        id: state.formData.id,
        pid: state.formData.pid,
        areaName: state.formData.areaName,
        shortName: state.formData.shortName,
        status: state.formData.status,
        areaCode: state.formData.id,
        level: state.formData.level,
        lng: state.formData.lng,
        lat: state.formData.lat,
        sort: state.formData.sort
      };
      if (state.operationAdd) {
        addObj(params).then(res => {
          if (res.code && res.code === 200) {
            useMessage().success(res.msg);
            emits("confirm", state.formData.pid);
            close();
          } else {
            useMessage().error(res.msg);
          }
        });
      } else {
        updateObj(params).then(res => {
          if (res.code && res.code === 200) {
            useMessage().success(res.msg);
            emits("confirm", state.formData.pid);
            close();
          } else {
            useMessage().error(res.msg);
          }
        });
      }
    }
  });
};
const handleAreaChange = (val, node) => {
  state.formData.pid = val;
  if (node) {
    state.formData.pname = node[0].label;
    state.formData.level = parseInt(node[0].level) + 1;
  }
};

defineExpose({
  show,
  close,
  save
});
</script>

<style lang="scss" scoped></style>
